<template>
	<div id='catalog'>
		<div class='all'>
			<a class='anchor' v-for='(cata,index) in cataArray' :href="cata.anchor">
				<span class='rect'></span>
				<span class='circle'></span>
				<span class='title'>{{ cata.title }}</span>
			</a>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'cata',
		data() {
			return {
				cataArray: [{
						title: 'Home',
						anchor: '#'
					},
					{
						title: '个人简介',
						anchor: '#page1'
					},
					{
						title: '项目经验',
						anchor: '#page2'
					},
					{
						title: '个人博客',
						anchor: '#page3'
					}, {
						title: '联系我',
						anchor: '#page4'
					}
				]
			}
		},
		props: {
			text: {
				type: String,
				default: 'Home'
			}
		},
		methods: {
			
		}
	}

</script>
<style scoped="true">
	* {
		margin: 0px;
		padding: 0px;
	}

	#catalog {
		width: 60%;
		margin: 0 auto;
		color: #FFFFFF;
		margin-top: 5px;
		overflow: hidden;
		font-size: 15px;
		background-color: black;
		font-family: 'Open Sans', sans-serif;
	}

	#catalog .all {
		width: 100%;
		margin-top: 80px;
		margin-left: -35px;
	}

	.anchor {
		text-decoration: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		text-align: center;
		margin: 20px 0px 20px 0px;
		font-family: '微软雅黑';
		font-weight: 400;
		font-size: 16px;
	}
	
	.anchor:hover {
		margin-left: 35px;
		transition: all 1.5s;
	}
	
	.anchor .rect {
		width: 35px;
		height: 1px;
		margin-right: 5px;
		background-color: #FFFFFF;
	}

	.anchor .circle {
		width: 5px;
		height: 5px;
		margin-right: 5px;
		border: 2px solid #FFFFFF;
		border-radius: 50%;
		background-color: black;
	}

	.anchor .title {
		margin-left: 5px;
	}

</style>
